<template>
    <div class="page-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
<!--            <el-tab-pane label="文件夹权限列表" name="config" v-if="showConfig">-->
<!--                <el-row :gutter="10" class="mb8">-->
<!--                    <el-col :span="1.5">-->
<!--                        <el-button-->
<!--                            type="primary"-->
<!--                            plain-->
<!--                            icon="el-icon-plus"-->
<!--                            size="mini"-->
<!--                            @click="handleAddDir"-->
<!--                        >AddFileDir-->
<!--                        </el-button>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-table-->
<!--                    :data="filesConfigList"-->
<!--                    style="width: 100%">-->
<!--                    <el-table-column-->
<!--                        prop="menuName"-->
<!--                        label="文件夹名称"-->
<!--                        width="180">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                        prop="perms"-->
<!--                        label="权限">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column label="Operate" align="center" class-name="small-padding fixed-width">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-button-->
<!--                                size="mini"-->
<!--                                type="text"-->
<!--                                icon="el-icon-delete"-->
<!--                                @click="handleDelete(scope.row)"-->
<!--                                v-hasPermi="['business:goodCatch:remove']"-->
<!--                            >Delete-->
<!--                            </el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                </el-table>-->
<!--            </el-tab-pane>-->

            <el-tab-pane v-for="(item,index) in treeData" :label="item.label" :name="'pane'+index">
                <el-table  v-if="item.children.length > 0"
                    :data="item.children"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="filePath"
                    border
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                        prop="label"
                        label="文件夹"
                        sortable
                        width="auto">
                    </el-table-column>
                    <el-table-column
                        prop="Operate"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.isFile"
                                type="text"
                                size="mini"
                                @click="() => downloadFile(scope.row)">
                                下载
                            </el-button>
                            <el-button
                                v-if="scope.row.isFile && scope.row.label.endsWith('.pdf')"
                                type="text"
                                size="mini"
                                @click="() => viewPdf(scope.row)"
                               > 预览
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加或修改goodCatch对话框 -->
        <el-dialog title="增加文件夹" :visible.sync="open" width="50%" :append-to-body="true"
                   :close-on-click-modal="false">
            <el-form ref="form" :model="newFileForm" label-width="auto">
                <el-form-item label="文件夹名称" prop="menuName">
                    <el-input v-model="newFileForm.menuName" placeholder="Input FileDirName"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">Submit</el-button>
                <el-button @click="cancel">Cancel</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.page-container {
    margin-left: 20px; /* 调整这个值以实现您想要的右移效果 */
}
</style>
<script>
import {addFirstConfig, deleteFirstConfig, getFirstConfig, listPath} from "@/api/business/first";
import {download,downloadBlob} from "@/utils/request";
export default {
    data() {
        return {
            showConfig:false,
            newFileForm: {
                menuName: '',
                perms: ''
            },
            open: false,
            filesConfigList: [],
            activeName: '',
            treeData: [],
            subTreeData: [],
            pdfList: [], // 存储PDF文件信息的数组
            pdfUrl:'',
        };
    },
    components:{},
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        downloadFile(node) {
            console.log(node)
            download("/common/downloadAny", {'fileName': node.filePath}, node.label)
        },
        viewPdf(node){
            downloadBlob("/common/downloadAny", {'fileName': node.filePath}, node.label).then(res=>{
                const binaryData = [];
                binaryData.push(res);
                //获取blob链接
                this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
                window.open(this.pdfUrl);
                window.URL.revokeObjectURL(this.pdfUrl);
            })
        },
        loadPdfList() {
            listPath("D:\\testFile\\一级文件").then((res) => {
                const resData = res.data
                console.log(resData)
               let root =  [{
                    isFile: false,
                    id: 1,
                    label: "一级文件",
                    filePath: "D:\\testFile\\一级文件",
                    children: []
                }]
                // 增加配置面板
                this.treeData = this.parseData(resData);
                root[0].children = this.treeData
                this.treeData = root
                this.activeName = 'pane0'
            })
        },
        parseData(data, beginId) {
            if (beginId === undefined || beginId < 0) {
                beginId = 0;
            }
            let res = [];
            const dirs = data.dir;
            if (dirs && dirs.length > 0) {
                for (const dir of dirs) {
                    let fileName = dir.path.split("\\");
                    let arr =  this.parseData(dir, ++beginId)
                    res.push({
                        isFile: false,
                        id: ++beginId,
                        label: fileName[fileName.length - 1],
                        filePath: dir.path,
                        children: arr,
                        hasChildren: arr > 0
                    })
                }
            }
            const files = data.files
            if (files && files.length > 0) {
                for (const file of files) {
                    if (!file.endsWith("pdf")){
                        continue
                    }
                    let fileName = file.split("\\");
                    res.push({
                        isFile: true,
                        id: ++beginId,
                        label: fileName[fileName.length - 1],
                        filePath: file,
                        children: []
                    })
                }
            }
            return res;
        },
        listFirstConfig() {
            getFirstConfig().then(res => {
                this.filesConfigList = res.data;
                console.log(this.filesConfigList)
            })
        },
        handleAddDir() {
            this.newFileForm = {};
            this.open = true;
        },
        handleDelete(row){
            const id = row.menuId ;
            this.$modal.confirm('Delete FileDir？').then(function () {
                return deleteFirstConfig(id);
            }).then(() => {
                this.listFirstConfig();
                this.$modal.msgSuccess("Delete Success");
            }).catch(() => {
            });
        },
        /** 提交按钮 */
        submitForm() {
            console.log(this.newFileForm.menuName)
            if (undefined === this.newFileForm.menuName || null === this.newFileForm.menuName || this.newFileForm.menuName === '') {
                this.$message({
                    message: '请输入文件夹名称',
                    type: 'error'
                });
                return;
            }
            addFirstConfig(this.newFileForm.menuName).then(res => {
                this.open = false;
                this.$modal.msgSuccess("Add Success");
                this.listFirstConfig();
            })
        },
        cancel() {
            this.open = false;
        },
    },
    created() {
        // 如果有权限则请求文件夹权限列表
        if (this.$auth.hasPermi("business:first:config")) {
            this.listFirstConfig();
            this.showConfig = true;
        }
        this.loadPdfList();
    }
};

</script>
